<!-- 找回密码。
根据手机号发送验证码，先查数据库，有发验证码 -->
<!-- 提交：校验验证码，通过校验之后，用新密码修改表。手机号、验证码输入框、新密码 -->

<template>
  <div class="lgbox findpass">
    <!-- <video :src="videoSrc" class="myvideo" autoplay muted loop></video> -->
    <div class="login-box">
      <h2 class="title">找回密码</h2>
      <div class="box">
        <!-- model:表单数据对象。status-icon：是否在输入框中显示校验结果反馈图标 。rules：表单验证规则。label-width：标签的长度 -->
        <el-form
          ref="myForm"
          :model="form"
          status-icon
          :rules="rules"
          label-width="120px"
          class="myform"
        >
          <!-- label:标签文本，prop：model的键名 -->
          <el-form-item label="手机号码" prop="phone">
            <el-input
              :prefix-icon="Iphone"
              v-model="form.phone"
              placeholder="手机号码"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="验证码" prop="captcha">
            <el-row>
              <el-col :span="12">
                <el-input
                  :prefix-icon="Headset"
                  clearable
                  v-model="form.captcha"
                  placeholder="验证码"
                  type="text"
                  autocomplete="off"
                />
              </el-col>
              <el-col :span="11" :offset="1">
                <el-button
                  v-if="flag"
                  :disabled="!disabled"
                  type="primary"
                  @click.stop="sendCaptcha"
                  >发送验证码</el-button
                >
                <el-button v-else disabled> 剩余 {{ count }} S</el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="新密码" prop="newpass">
            <el-input
              :prefix-icon="Lock"
              v-model="form.newpass"
              placeholder="新密码"
              show-password
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item class="lastitem">
            <div class="alinks">
              <router-link to="/login" class="litem">去登录</router-link>
              <router-link to="/changepass" class="litem bg"
                >修改密码</router-link
              >
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="btnblock"
              @click="submitData()"
              >找回密码</el-button
            >
            <el-button type="danger" class="btnblock" @click="resetForm(myForm)"
              >重置数据</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
export type strType = string | number | boolean; //这句是个啥意思
import { User, Lock, Iphone, Headset } from "@element-plus/icons-vue";
import { reg } from "@/utils/validate";
import { useRoute, useRouter } from "vue-router"; // useRoute 获取路由参数  useRouter 路由跳转
import { Ajax } from "@/api";
import { ShowErrorMsg } from "@/utils";
let timer: any = null;
const myForm = ref<any>();
const form = reactive<any>({
  phone: "",
  captcha: "",
  newpass: "",
});
const route = useRoute();
const router = useRouter();
const count = ref(30);
const flag = ref(true);
const disabled = computed(() => {
  return reg.phone.test(form.phone); //如果手机号没有通过校验，发送验证码的按钮就不可使用
});
const rules = reactive<any>({
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    {
      pattern: reg.phone,
      message: "请输入正确格式的手机号码",
      trigger: "blur",
    },
  ],
  captcha: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
    {
      pattern: reg.code,
      message: "请输入四位数字验证码",
      trigger: "blur",
    },
  ],
  newpass: [
    {
      required: true,
      message: "请输入新密码",
      trigger: "blur",
    },
    {
      pattern: reg.pwd,
      message: "请输入6-16位的数字和字母组合的新密码",
      trigger: "blur",
    },
  ],
});
// 发送验证码
const sendCaptcha = async () => {
  timeDown();
  let res = await Ajax.getcaptcha({
    phone: form.phone,
  });
};
const timeDown = () => {
  count.value--;
  flag.value = false;
  timer = setInterval(() => {
    if (count.value > 0) {
      count.value--;
      flag.value = false;
    } else {
      count.value = 30;
      flag.value = true;
      clearInterval(timer);
      timer = null;
    }
  }, 1000);
};

const submitData = () => {
  myForm.value.validate(async (valid: any) => {
    if (valid) {
      //手机号和验证码通过校验
      let res: any = await Ajax.findpass(form);
      if (res.code == 200) {
        localStorage.setItem("yq_account", res.result.username);
        localStorage.setItem("yq_phone", form.phone);
        sessionStorage.setItem("yq_token", res.token); //token存的位置不一样
        router.push({ name: "main" });//main页面和路由还没写
      }
    } else {
      ShowErrorMsg("校验失败");
    }
  });
};

const resetForm = (myForm: FormInstance | undefined) => {
  if (!myForm) return;
  myForm.resetFields();
};
onUnmounted(() => {
  clearInterval(timer);
  timer = null;
});
</script>

<style></style>
